import { createContext, useCallback, useMemo, useState } from 'react'
import VideoList from './feature/VideoList'
import PlayControl from './feature/PlayControl'
import './App.less'

export const PlayerControl = createContext<{ voice: number; status: Boolean; grid: number }>({
  voice: 100,
  status: false,
  grid: 0
})

function App() {
  const [status, setStatus] = useState(false)
  const [voice, setVoice] = useState(100)
  const [grid, setGrid] = useState<number>(0)

  return (
    <PlayerControl.Provider value={{ voice, status, grid }}>
      <PlayControl onTogglePlay={value => setStatus(value)} onChangeVoice={value => setVoice(value)} onChangeGrid={value => setGrid(value)}></PlayControl>
      <VideoList></VideoList>
    </PlayerControl.Provider>
  )
}

export default App
